import { useDrop } from "react-dnd";
import styles from "../index.less";
import cn from "classnames";
import DndStore from '../store/DndStore';
import { observer } from "mobx-react"; 
import { DomItem, DragItem, DropCollectedProps, DropResult, DRAG_TYPE, DRAG_NAME } from "../@types";

import TextView from "../views/TextView";

type Props = {
    store: DndStore;
}

const DropZone = observer(({store}: Props) => {

    const { domItems } = store;

    const [{ isOver, canDrop }, drop] = useDrop<DragItem, any, any>(() => ({
        accept: ['TEXT', 'IMAGE', 'QRCODE', 'TABLE_SHEET', 'PIVOT_SHEET', 'GRID', 'DIVIDER'],
        drop: (item, monitor) => {
            const domItem: DomItem = {
                reportId: 1000,
                id: 1,
                ...item,
                display: 'flex',
                position: 'relative',
                x: 0,
                y: 0,
                width: 'auto',
                height: 'auto',
                widthAdaptive: true,
                heightAdaptive: false,
                props: {
                    text: '请输入文本内容',
                    fontSize: 14,
                    color: '#333',
                    fontWeight: '400',
                },
            };
            store.addItem(domItem);
            store.setSelectedDomItem(domItem);
        },
        hover: (item, monitor) => {},
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop(),
        }),
    }));

    return (
        <div
            ref={drop}
            className={cn(styles.zone, styles.drop)}
            style={{
                backgroundColor: isOver ? "lightgreen" : "#eaeaea",
            }}
        >
            {domItems?.map((item, index) => {
                if (item.type == 'TEXT') {
                    return <TextView key={`${item.id}-${index}`} item={item} index={index} />
                }
                return null;
            })}
        </div>
    );
});

export default DropZone;